<!DOCTYPE html>
<meta charset="utf-8">

<html>
  <head>
    <title>Minigo: study</title>
    <link href="style.css" rel="stylesheet">
    <script type="text/javascript" src="socketio/socket.io.min.js"></script>
    <script data-main="study" src="require/require.js"></script>
    <style>
      .minigui {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        height: 90vh;
        margin-top: 5vh;
      }

      .button {
        font-size: 1.4vh;
        border-radius: 0.6vh;
        width: 11vh;
        height: 4vh;
        background-color: #111;
        color: #eee;
      }

      .comment-head {
        border-radius: 0.6vh 0.6vh 0 0;
        border-bottom: 1px dashed #543;
        width: 39vh;
        height: 4vh;
        font-family: sans-serif;
        font-size: 1.4vh;
        background-color: #2c241e;
        align-items: center;
        justify-content: left;
        color: #eee;
        display: flex;
        padding-left: 1vh;
      }

      #main-board { width: 100%; height: 100%; }
      .main-board-pad { height: 100%; width: 90vh; padding: 3vh; }
      .graph { width: 39vh; height: 24vh; }
      .log-container {
        background-color: rgba(0, 0, 0, 0.75);
        position: absolute;
        left: 0;
        top: -40vh;
        width: 100vw;
        height: 40vh;
        transition: top 0.15s;
      }
      .log { height: calc(40vh - 24px); font-size: 9px; }
      .console-wrapper { height: 24px; }
      .console-prompt { font-size: 10px; width: 16px; }
      #console { font-size: 10px; width: calc(100vw - 16px); padding: 3px 0 3px 0; }
      #console:focus { outline: none; }

      #comment {
        width: 39vh;
        height: 24vh;
        background-color: #2c241e;
        color: rgba(255, 255, 255, 0.7);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        font-size: 0.9vh;
        font-family: monospace;
        overflow-y: auto;
        padding: 4px;
        white-space: pre-wrap;
      }

      #tree {
        width: 39vh;
        height: 18vh;
        background-color: #2c241e;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        overflow: hidden;
      }

      #load-sgf-input {
        height: 0;
        position: absolute;
        width: 0;
        overflow: hidden;
      }

      .item { display: inline-flex; flex: 1; cursor: default; }

      #move {
        display: inline-flex;
        flex: 1;
        cursor: text;
        margin-right: 1vh;
      }
      #move:focus { outline: none }
      #move:hover { background-color: #111; }
    </style>
  </head>

  <body>
    <!--
      Explanation of settings:
        report_search_interval=50 : backend sends search messages every 250ms.
    -->
    <div class="minigui" data-gtp-report_search_interval="50">

      <div class="main-board-pad board"><div id="main-board"></div></div>

      <div class="sp-3vh"></div>

      <div class="fs-0" style="display:flex; flex-direction:column">
        <div class="fs-0" style="display:flex">
          <div id="toggle-search" class="button">Hide search</div>
          <div class="sp-3vh"></div>
          <div id="clear-board" class="button">Clear board</div>
          <div class="sp-3vh"></div>
          <label class="button">Load SGF
            <input id="load-sgf-input" type="file" accept=".sgf">
          </label>
        </div>

        <div class="sp-3vh"></div>

        <div id="tree"></div>

        <div class="sp-3vh"></div>

        <div class="fs-0" style="display:flex">
          <div style="display:flex; width:14vh"></div>
          <div id="count-score" class="button">Count score</div>
          <div class="sp-3vh"></div>
          <div id="main-line" class="button">To main line</div>
        </div>

        <div class="sp-3vh"></div>

        <div class="comment-head">
          <div style="display:inline-flex; flex:7;">
            <div class="item">Move:&nbsp;<span id="move" contenteditable="true">0</span></div>
            <div class="item">Reads:&nbsp;<span id="reads">0</span></div>
          </div>
          <div style="display:inline-flex; flex:3;">
            <div class="item">B:&nbsp;<span id="b-caps">0</span></div>
            <div class="item">W:&nbsp;<span id="w-caps">0</span></div>
          </div>
        </div>

        <div id="comment"></div>

        <div class="sp-3vh"></div>

        <div id="winrate-graph" class="graph"></div>
      </div>

      <div id="log-container" class="log-container">
        <div id="log" class="log"></div>
        <div class="console-wrapper">
          <div class="console-prompt">&gt;</div><div contenteditable id="console" class="console"></div>
        </div>
      </div>
    </div>

  </body>
</html>
